<template>
	<view>
		<u-overlay :show="loginOutStart" :opacity="0.2"></u-overlay>
		<view class="goLogin" v-if="!this.token">
			<image src="../../static/gologin.png" mode=""></image>
			<u-button style="width: 50%;" :plain="true" text="去登陆" @click="goRegBtn"></u-button>
		</view>

		<view class="my_main" v-if="this.token">
			<view class="my_top_cart">
				<view class="sao">
					<view class="sao_left">
						<u-icon name="scan" size="50rpx" color="#fffff"></u-icon>
						<text>扫一扫</text>
					</view>
					<view class="sao_right">
						<u-icon name="setting" size="50rpx" color="#fffff"></u-icon>
					</view>
				</view>
				<view class="avatar_center sao" @click="userInfoHandler">
					<view class="avatar sao_left">
						<u-avatar :src="avatarSrc" size="115rpx"></u-avatar>
						<text>{{nikeName}}</text>
					</view>
					<u-icon name="arrow-right" color="#ffffff" size="28"></u-icon>
				</view>
				<view class="bottom_cart sao">
					<view>
						我的文章
					</view>
					<u-line direction="col" color="#ffffff" length="50rpx"></u-line>
					<view>
						关注的医生
					</view>
				</view>
			</view>
			<view class="my_main">
				<u-cell-group>
					<u-cell icon="bag" title="我的订单" @click="myOrdersHandler"></u-cell>
					<u-cell icon="map" title="我的地址" value="" @click="myAddressHandler"></u-cell>
					<u-cell icon="shopping-cart" title="我的购物车" value=""></u-cell>
					<u-cell icon="lock-open" title="修改密码" value=""></u-cell>
					<u-cell icon="question" title="帮助中心" value=""></u-cell>
					<u-cell title="关于我们" value="新版本"></u-cell>
				</u-cell-group>
			</view>
			<u-button @click="loginOutHandler" text="退出登录" :loading="loginOutStart" loadingText="退出中"
				:disabled="loginOutStart"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		gettoken,
		settoken,
		dalImg
	} from "../../utils/tools.js"
	import {
		GetUserInfoAPI
	} from "../../services/api.js"
	export default {
		data() {
			return {
				token: "",
				loginOutStart: false,
				avatarSrc: '',
				nikeName: '昵称'
			}
		},
		methods: {
			goRegBtn() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			loginOutHandler() {
				this.loginOutStart = true
				settoken("")
				setTimeout(() => {
					this.loginOutStart = false
					uni.switchTab({
						url: "/pages/index/index"
					})
				}, 500)
			},
			getUserInfo() {
				GetUserInfoAPI().then((res) => {
					this.avatarSrc = dalImg(res.data.avatar)
					this.nikeName = res.data.nickName ? res.data.nickName : res.data.userName
				})
			},
			userInfoHandler() {
				uni.navigateTo({
					url: "/pages/userInfo/userInfo"
				})
			},
			myAddressHandler(){
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			myOrdersHandler(){
				uni.navigateTo({
					url:"/pages/orders/orders"
				})
			}
		},
		// 页面加载时，只调用一次
		onLoad() {
			if (!gettoken()) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		},
		// 页面每次显示的时候
		onShow() {
			this.getUserInfo()
			this.token = gettoken()

		}
	}
</script>

<style>
	.my_top_cart {
		background-color: #fda085;
		height: 300rpx;
		padding: 20rpx;
	}

	.sao {
		display: flex;
		justify-content: space-between;

		.sao_left {
			display: flex;
			align-items: center;
		}
	}

	.avatar_center {
		margin: 30rpx;

		.avatar {
			text {
				margin-left: 30rpx;
			}
		}
	}

	.bottom_cart {
		border-top: 1rpx solid #fff;
		height: 90rpx;
		align-items: center;
		justify-content: space-around;
	}

	.goLogin {
		text-align: center;
		padding-top: 100rpx;

		image {
			height: 700rpx;
		}
	}
</style>